<template>
	<view ref="yl_nav_bar" class="yl_nav_bar">
		<!-- #ifdef APP-PLUS -->
		<!-- app安全区 -->
		<view class="safe_area">
		</view>
		<!-- #endif -->
		<!-- 完整的顶部导航 -->
		<view class="yl_nav_bar_wrapper">
			<!-- logo -->
			<view class="yl_nav_bar_logo">
				<image v-if="logo" src="@/src/static/login/nodelogos.png" mode="widthFix"></image>
			</view>
			<!-- 返回按钮 -->
			<view class="yl_nav_bar_back" v-if="back">
				<uni-icons type="left" size="22" color="#797B7F" @click="goBack"></uni-icons>
			</view>
			<!-- 显示标题 -->
			<view v-if="title" class="yl_nav_bar_title">
				{{title}}
			</view>
			<!-- 中英文切换 -->
			<view v-if="langt" class="yl_nav_bar_picker">
				<uni-data-select v-model="index" :localdata="options" @change="handleChange"
					:clear="false"></uni-data-select>
			</view>
			<!-- 筛选条件 -->
			<view v-if="filter" class="yl_nav_bar_filter" @click="handleFilter">
				<image class="back" src="/static/firstpage/flter.png"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted
	} from "vue"
	// import {
	// 	onLoad
	// } from "@dcloudio/uni-app";

	const props = defineProps({
		logo: {
			type: Boolean,
			default: false
		},
		back: {
			type: Boolean,
			default: true
		},
		title: {
			type: String,
			default: ""
		},
		langt: {
			type: Boolean,
			default: false
		},
		filter: {
			type: Boolean,
			default: false
		}
	})

	const options = ref()
	options.value = [{
			text: 'English',
			value: "0"
		},
		{
			text: '简体中文',
			value: "1"
		}
	]

	const index = ref('')
	index.value = '1'

	// 获取状态栏高度
	const statusBarHeight = ref(0)
	const navBarHeight = ref(44) // 默认导航栏高度

	// 初始化获取系统信息
	onMounted(() => {
		const systemInfo = uni.getSystemInfoSync()
		statusBarHeight.value = systemInfo.statusBarHeight || 0
		// 小程序中导航栏高度可能不同
		navBarHeight.value = systemInfo.platform === 'ios' ? 44 : 48
	})
	const emit = defineEmits(['goBack', 'handleChange', "handleFilter"])
	// 点击返回
	const goBack = () => {
		emit("goBack");
	}
	// 点击切换语言
	const handleChange = () => {
		emit("handleChange")
	}
	const handleFilter = () => {
		emit("handleFilter")
	}
</script>

<style lang="less" scoped>
	/* 顶部导航 */
	.yl_nav_bar {
		position: fixed;
		top: 0;
		left: 50%;
		z-index: 90;
		width: 100%;
		max-width: 1190px;
		height: 88rpx;
		transform: translate(-50%, 0);
		background-color: #000;
		box-sizing: border-box;
	}

	.yl_nav_bar_border {
		border-bottom: 1px solid #17181A;
	}

	/* 兼容app顶部状态栏高度 */
	/* #ifdef APP-PLUS */
	.yl_nav_bar {
		height: calc(var(--status-bar-height) + 88rpx);
	}

	.yl_nav_bar .safe_area {
		height: var(--status-bar-height);
	}

	/* #endif */

	.yl_nav_bar {
		.yl_nav_bar_wrapper {
			position: relative;
			width: 100%;
			height: 88rpx;
			text-align: center;
			font-size: 32rpx;
		}
	}

	.yl_nav_bar .yl_nav_bar_logo {
		position: absolute;
		left: 32rpx;
		top: 24rpx;
		width: 232rpx;
	}

	.yl_nav_bar .yl_nav_bar_back {
		position: absolute;
		left: 32rpx;
		top: 20rpx;
	}

	.yl_nav_bar .yl_nav_bar_title {
		font-size: 32rpx;
		line-height: 88rpx;
		color: #fff;
	}

	/* 筛选 */
	.yl_nav_bar .yl_nav_bar_filter {
		position: absolute;
		right: 32rpx;
		top: 24rpx;
	}

	.yl_nav_bar .yl_nav_bar_filter image {
		width: 40rpx;
		height: 40rpx;
	}

	/* 中英文切换 */
	 .yl_nav_bar_picker {
		position: absolute;
		right: 30rpx;
		top: 8rpx;
		display: flex;
		width: 200rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: unset;

		
	}
	::v-deep .yl_nav_bar_picker  .uni-stat-box {
		background-color: transparent !important;
	}
	::v-deep.uni-select{
		border: none;
	}

	.yl_nav_bar_picker .uni-input {
		padding: 0 10rpx;
		background: transparent;
	}

	.triangle {
		align-self: center;
		width: 0;
		height: 0;
		border-left: 8rpx solid transparent;
		border-right: 8rpx solid transparent;
		border-bottom: 10rpx solid #fff;
		/* 调整颜色和高度 */
		transform: rotate(180deg);
		margin-left: 10rpx;
	}

	.yl_nav_bar_picker ::v-deep .uni-select__input-text {
		font-size: 28rpx;
		color: #fff;
		margin-right: 10rpx;
	}
</style>